<template>
	<view>
		<view class="flex align-center justify-between">
			<view class="car-top-content first" @click="toQuestion">
				<view class="title">问卷调查</view>
				<view class="desc">
					<text class="cuIcon-title" style="color: #DA5353;"></text>
					有一份问卷调查需要填写</view>
			</view>
			<view class="car-top-content second" @click="toCard">
				<view class="title">打卡任务</view>
				<view class="desc">
					做打卡任务  记录低碳行为
				</view>
			</view>
		</view>
		<view class="car-center-content">
			<view class="flex align-center justify-between">
				<view class="title">用能排放管理</view>
				<view class="flex align-center rl">
					<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
					<image src="https://txr001.zthj.net/static/img/rl.png" class="img-24 margin-left-62"></image>
				</view>
			</view>
			<view class="margin-top-32 flex align-center justify-between">
				<view class="enery-manage-content">
					<view class="flex align-center justify-start">
						<view class="d-left d-first"></view>
						<view class="title">用电(度)</view>
					</view>
					<view class="eny-num">0</view>
					<view>
						<image src="https://txr001.zthj.net/static/img/numUp.png" class="img-32 text-img-center"></image>
						<text class="up-text">较上月0%</text>
					</view>
				</view>
				<view class="enery-manage-content">
					<view class="flex align-center justify-start">
						<view class="d-left d-second"></view>
						<view class="title">用水(吨)</view>
					</view>
					<view class="eny-num">0</view>
					<view>
						<image src="https://txr001.zthj.net/static/img/numUp.png" class="img-32 text-img-center"></image>
						<text class="up-text">较上月0%</text>
					</view>
				</view>
				<view class="enery-manage-content">
					<view class="flex align-center justify-start">
						<view class="d-left d-three"></view>
						<view class="title">用气(吨)</view>
					</view>
					<view class="eny-num">0</view>
					<view>
						<image src="https://txr001.zthj.net/static/img/numUp.png" class="img-32 text-img-center"></image>
						<text class="up-text">较上月0%</text>
					</view>
				</view>
			</view>
			
			<view class="flex align-center justify-between margin-top-32">
				<view class="title">小区用能排放详情</view>
				<view class="flex align-center rl">
					<image src="https://txr001.zthj.net/static/img/eneryAdd.png" class="img-28 text-img-center"></image>
					<text class="add-text">添加查看对象</text>
				</view>
			</view>
			<view class="car-info-content margin-top-26" v-for="(item,index) in 2" :key="index">
				<view class="title">某某小区</view>
				<view class="padding-top-32 flex text-center">
					<view class="flex-sub">
						<view class="info-num">0</view>
						<view class="car-info-desc">用电(度)</view>
					</view>
					<view class="flex-twice">
						<view class="info-num">0</view>
						<view class="car-info-desc">用水(吨)</view>
					</view>
					<view class="flex-sub">
						<view class="info-num">0</view>
						<view class="car-info-desc">用气(吨)</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="footer">
			<button class="cu-btn filling-btn" @click="toFilling">数据填报</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:"2023-12",
			}
		},
		onLoad() {
		},
		methods: {
			toFilling(){
				uni.navigateTo({
					url:"/pages/carManage/carbonFilling"
				})
			},
			toQuestion(){
				uni.navigateTo({
				    url:"/subpackage/pages/voucher/index"
				})
				// uni.navigateTo({
				// 	url:"/pages/questionnaire/questionnaire"
				// })
			},
			toCard(){
				uni.navigateTo({
				    url:"/subpackage/pages/voucher/index"
				})
				// uni.navigateTo({
				// 	url:"/pages/clock/clockCalendar"
				// })
			}
		}
	}
</script>

<style scoped lang="less">
	.car-top-content{
		width: 328rpx;
		height: 160rpx;
		border-radius: 24rpx;
		padding: 24rpx 24rpx 42rpx;
		.title{
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
		.desc{
			padding-top: 16rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.first{
		background: #01C77A;
	}
	.second{
		background-color: #4491EE;
	}
	.car-center-content{
		margin-top: 35rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
		padding: 50rpx 32rpx 82rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		.rl{
			border-radius: 8rpx;
			border: 2rpx solid #000000;
			padding: 10rpx 16rpx;
		}
		.enery-manage-content{
			width: 186rpx;
			height: 200rpx;
			background: rgba(36,69,142,0.06);
			border-radius: 24rpx;
			padding: 22rpx;
			.title{
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				padding-left: 16rpx;
			}
			.d-left{
				margin-top: 6rpx;
				width: 6rpx;
				height: 24rpx;
				border-radius: 12rpx;
			}
			.d-first{
				background: #01C77A;
			}
			.d-second{
				background: #4491EE;
			}
			.d-three{
				background: #EDBA36;
			}
			.eny-num{
				font-size: 40rpx;
				font-weight: 600;
				color: #000000;
				padding: 16rpx 0;
			}
			.up-text{
				font-size: 20rpx;
				font-weight: 400;
				color: #000000;
				padding-left: 8rpx;
			}
		}
		.add-text{
			font-size: 20rpx;
			font-weight: 400;
			color: #333333;
			padding-left: 8rpx;
		}
	}
	.car-info-content{
		background: rgba(68,145,238,0.06);
		border-radius: 24rpx;
		padding: 24rpx;
		.title{
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
		}
		.car-info-desc{
			padding-top: 12rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
		}
		.info-num{
			font-size: 40rpx;
			font-weight: 600;
			color: #000000;
		}
	}
	.filling-btn{
		height: 88rpx;
		line-height: 88rpx;
		background: #24458E;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 100%;
	}
	.footer{
		margin-top: 76rpx;
		// padding: 0 32rpx;
		// position: fixed;
		// bottom: 82rpx;
		// width: 100%;
	}
</style>